<template>
  <!-- 写作列表 -->
  <div class="entity-org">
    <div class="entity-main">
      <el-row :gutter="20" type="flex">
        <el-col :span="12" style="background: transparent;" class="leftbox">
          <NewCard title="文章列表" :isright="true" :border="false" v-hasPermi="['base:documents:list']">
            <template #right>
              <el-input v-model="titlename" clearable placeholder="标题" @change="searchtitle"></el-input>
              <el-select
                v-model="articlehotwordid"
                :value-key="articlehotwordid"
                placeholder="选择热词"
                clearable
                @change="selecthotword"
              >
                <el-option label="全部" value></el-option>
                <el-option
                  v-for="(item) in hotwordlist"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-button type="primary" @click="search">搜索</el-button>
            </template>
            <!-- 表格 -->
            <el-table
              ref="monthlyPlanTable"
              :data="copywritelist"
              style="width: 100%"
              highlight-current-row
              @row-click="RowClickFn"
              :row-class-name="tableRowClassName"
            >
              <el-table-column width="36">
                <template slot-scope="scope">
                  <img v-if="scope.row.status==0" src="~@/assets/images/ywc_icon.svg" />
                  <img v-else src="~@/assets/images/cgx_icon.svg" />
                </template>
              </el-table-column>
              <el-table-column label="标题" width="250">
                <template slot-scope="scope">
                  <el-popover
                    popper-class="officeweb-popover"
                    placement="top-start"
                    trigger="hover"
                    :content="scope.row.title"
                  >
                    <p slot="reference">{{ scope.row.title}}</p>
                  </el-popover>
                  <!-- <p>{{ scope.row.title}}</p> -->
                </template>
              </el-table-column>
              <el-table-column label="热词">
                <template slot-scope="scope">
                  <el-popover
                    popper-class="officeweb-popover"
                    placement="top-start"
                    trigger="hover"
                    :content="scope.row.label"
                  >
                    <p slot="reference">{{ scope.row.label}}</p>
                  </el-popover>
                  <!-- <p>{{ scope.row.label?scope.row.label:"--" }}</p> -->
                </template>
              </el-table-column>
              <el-table-column label="内链数" width="60">
                <template slot-scope="scope">
                  <p>{{ scope.row.linkNum?scope.row.linkNum:'--' }}</p>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" width="95">
                <template slot-scope="scope">
                  <p>{{ parseTime(scope.row.createTime,"{y}-{m}-{d}")}}</p>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 40]"
                :pager-count="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageing.total"
              ></el-pagination>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="12" class="rightbox">
          <NewCard :isright="true" :border="false">
            <template #right>
              <el-input
                v-if="edittitlenameflag"
                v-model="titleinfo"
                :placeholder="titleinfo"
                @change="edittitlename"
              ></el-input>
              <p v-else>{{titleinfo}}</p>
              <i v-if="edittitlenameflag" @click="hideedittitlename" class="el-icon-circle-check"></i>
              <img v-else @click="showedittitlename" src="~@/assets/images/cgx_icon.svg" />
            </template>
            <div
              class="writetip"
            >字数上限：{{maxwordNum}}字 | 字数下限：{{minwordNum}}字 | 当前字数：{{wordNum}}字 | 查重率：{{repetitiverate}}%</div>
            <WangEditor
              :wangkey="1"
              ref="wangEditor"
              :list="currentContent"
              @change="onEditorChange($event)"
              v-loading="fullscreenLoading"
            ></WangEditor>
            <SubBtn>
              <template slot="btn">
                <div class="left">
                  热词：
                  <!-- <template
                    v-if="selecthotwordlist.length>2?selecthotwordlist.splice(2):selecthotwordlist"
                  >-->
                  <span
                    :key="tag"
                    v-for="(tag,index) in selecthotwordlist"
                    v-if="index<3"
                  >{{index<2?tag:'...'}}</span>

                  <!-- </template> -->

                  <img @click="drawer = true" src="~@/assets/images/tj_icon.png" class="tj_icon" />
                </div>
                <div class="bottomBtn">
                  <el-button round @click="copywriteRemove" v-hasPermi="['work:documents:remove']">删除</el-button>
                  <div class="selsect-box" v-hasPermi="['base:documents:edit']">
                    <p>
                      发表至
                      <i class="el-icon-caret-bottom"></i>
                    </p>
                    <el-select
                      v-model="groupId"
                      placeholder="请选择"
                      clearable
                      popper-class="publishSelect"
                    >
                      <el-option label="案例" value="案例" @click.native="selectaboutGroup('案例')"></el-option>
                      <el-option
                        v-for="(item,index) in aboutGrouplist"
                        :key="index"
                        :label="'关于-'+item.name"
                        :value="item.id"
                        @click.native="selectaboutGroup(item.id)"
                      ></el-option>
                    </el-select>
                  </div>
                </div>
              </template>
            </SubBtn>
          </NewCard>
        </el-col>
      </el-row>
    </div>
    <!-- 选择热词抽屉 title="我是标题"-->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      title="选择热词"
    >
      <div class="selecthotwordlist">
        <div class="hotwordtitle">已选热词({{selecthotwordlist.length}})</div>
        <div class="taglist">
          <el-tag
            :key="tag"
            v-for="tag in selecthotwordlist"
            closable
            :disable-transitions="false"
            @close="removeselecthotword(tag)"
          >{{tag}}</el-tag>
        </div>
      </div>
      <div class="fliterhotwordlist">
        <div class="hotwordtitle">可选热词({{fliterhotwordlist.length}})</div>
        <template>
          <el-input
            @input="fliterhotwoldsearch"
            v-model="fliterhotword"
            prefix-icon="el-icon-search"
            placeholder="搜索热词"
          ></el-input>
        </template>
        <div class="taglist">
          <el-tag
            :key="tag.id"
            v-for="tag in fliterhotwordlist"
            @click="clickselecthotword(tag)"
          >{{tag.label}}</el-tag>
        </div>
      </div>
      <el-button type="primary" @click="Closedrawer">确定</el-button>
    </el-drawer>
  </div>
</template>

<script>
import {
  gethotLabelGetInfoApi,
  gethotLabelListApi,
  gethotLabeladdApi
} from "@/wss/newApi_3-24/officewebsite/hotLabel.js";
import {
  getselectMaterialListApi,
  getselectMaterialEditApi,
  getselectMaterialRemoveApi
} from "@/wss/newApi_3-24/officewebsite/selectmaterial.js";
import {
  getaboutGroupListApi,
  getlistOfficialApi
} from "@/wss/newApi_3-24/officewebsite/aboutGroup.js";
import WangEditor from "@/wss/components/wangEditor.vue";
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

export default {
  name: "officewebsitewrite",
  components: {
    NewCard,
    WangEditor,
    SubBtn
  },
  data() {
    return {
      titlename: "", //文章列表-标题输入框筛选的值
      articlehotwordid: "", //文章列表-热词选择框选中的热词id
      minwordNum: 1, //最小输入字数--官网设置获取
      maxwordNum: 100, //最小输入字数--官网设置获取
      presentwordNum: 1, //当前输入字数
      wordNum: 0, //字数
      repetitiverate: 0, //查重率
      titleinfo: "", //文章标题详情
      edittitlenameflag: false, //是否展示修改文章标题输入框
      fullscreenLoading: false, //发表文章，结果返回前的加载状态
      copywritelist: [], // 文章列表
      selectcopywrite: [], //选择的文章
      hotwordlist: [], //热词列表
      selecthotwordlist: [], //选择的热词数组（已选热词）
      fliterhotwordlist: [], //过滤已选择的热词列表（未选热词）
      aboutGrouplist: [], //关于分类列表
      Officiallist: [], //官网设置列表
      showselecthotwordlist: [], //展示在底部栏的热词列表 目前展示两个
      typeid: 1, //发表至-类型	1 案例 2 关于
      groupId: "", //发表至-关于分类id
      fliterhotword: "", //抽屉搜索热词的值
      // 富文本的内容
      currentContent: [],
      selectItem: 0, //选择某一行
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      //抽屉参数
      drawer: false,
      direction: "rtl"
    };
  },
  async mounted() {
    this.gethotwordlist();
    this.getcopywritelist();
    this.getaboutGroupList();
    this.getlistOfficial();
  },
  watch: {
    copywritelist: function() {
      this.$nextTick(function() {
        this.$refs.monthlyPlanTable.setCurrentRow(
          this.copywritelist[this.selectItem]
        );
      });
    }
    // selecthotwordlist: function() {
    //   if (this.selecthotwordlist.length > 2) {
    //     this.showselecthotwordlist = this.selecthotwordlist.splice(2);
    //   } else {
    //     this.showselecthotwordlist = this.selecthotwordlist;
    //   }
    // }
  },
  methods: {
    //文章列表
    async getcopywritelist() {
      let data = {
        title: this.titlename,
        labelId: this.articlehotwordid,
        status: this.status,
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize
      };
      let { rows, code, total } = await getselectMaterialListApi(data);

      if (code == 200) {
        // this.articlehotwordid = "";
        // this.titlename = "";
        this.pageing.total = total;
        this.copywritelist = rows;
        this.updatelist(this.selectItem);
        // this.selectcopywrite = rows[this.selectItem];
        // this.currentContent = [rows[this.selectItem]?.content ?? ""];
        // this.wordNum = rows[this.selectItem].size;
        // this.titleinfo = rows[this.selectItem].title;
        // let labellist = rows[this.selectItem].label.split("；");
        // //console.log(labellist);
        // this.selecthotwordlist = labellist;
        // this.fliterhotwordlist = this.hotwordlist.filter(item => {
        //   return labellist.join("").indexOf(item.label) == -1;
        // });
      }
      // console.log(this.copywritelist);
    },
    // 表格行点击了
    RowClickFn(row, column, event) {
      this.selectItem = row.index;
      this.updatelist(row.index);
      // this.selectcopywrite = row;
      // this.currentContent = [row?.content ?? ""];
      // this.wordNum = row.size;
      // this.titleinfo = row.title;
      // this.fullscreenLoading = false;
      // this.edittitlenameflag = false;
    },
    // 更改数据
    updatelist(selectItem) {
      // console.log(selectItem);
      if (selectItem > this.copywritelist.length - 1) {
        selectItem = 0;
        this.selectItem = 0;
      }
      // console.log(this.copywritelist);
      // console.log(this.copywritelist[selectItem]);
      this.selectcopywrite = this.copywritelist[selectItem];
      this.currentContent = [this.copywritelist[selectItem]?.content ?? ""];
      this.wordNum = this.copywritelist[selectItem].size;
      this.titleinfo = this.copywritelist[selectItem].title;
      if (this.selectcopywrite.hasOwnProperty("label")) {
        var labellist = this.copywritelist[selectItem].label.split("；");
        //console.log(labellist);
      } else {
        var labellist = [];
      }
      this.selecthotwordlist = labellist;
      this.fliterhotwordlist = this.hotwordlist.filter(item => {
        return labellist.join("").indexOf(item.label) == -1;
      });
      this.fullscreenLoading = false;
      this.edittitlenameflag = false;
    },
    // 热词列表
    async gethotwordlist() {
      //const { pageNum, pageSize } = this.pageing;
      let { code, rows, total } = await gethotLabelListApi({
        label: ""
      });
      this.hotwordlist = rows;
      this.fliterhotwordlist = rows;

      // console.log(this.hotwordlist);
    },
    //关于分类列表
    async getaboutGroupList() {
      //const { pageNum, pageSize } = this.pageing;
      let res = await getaboutGroupListApi({
        pageNum: 1,
        pageSize: 50
      });
      // console.log(res);
      this.aboutGrouplist = res.rows;
      // console.log(this.aboutGrouplist);
    },
    //选择发表的关于分类
    selectaboutGroup(item) {
      console.log(item);

      if (item != "案例") {
        this.typeid = 2;
        this.groupId = item;
      } else {
        this.typeid = 1;
        this.groupId = "";
      }
      this.publish();
    },
    //文章热词选择框触发事件
    selecthotword(event) {
      // console.log(event);
      this.articlehotwordid = event;
    },
    //文章列表标题输入框触发事件
    searchtitle(event) {
      // console.log(event);
      this.titlename = event;
    },
    //修改文章标题输入框触发事件
    edittitlename(event) {
      this.titleinfo = event;
    },
    //显示文章标题输入框
    showedittitlename() {
      this.edittitlenameflag = true;
    },
    //隐藏文章标题输入框
    hideedittitlename() {
      this.edittitlenameflag = false;
    },
    //搜索文章列表
    search() {
      console.log("搜索搜索");
      this.getcopywritelist();
    },
    //选择热词
    clickselecthotword(tag) {
      // console.log(tag);
      // console.log(this.selecthotwordlist);
      this.selecthotwordlist.push(tag.label);

      let fliterhotwordlist = this.fliterhotwordlist.filter(
        item => item.label != tag.label
      );
      this.fliterhotwordlist = fliterhotwordlist;
      //console.log(fliterhotwordlist);
    },
    //从已选列表中删除热词
    removeselecthotword(tag) {
      //console.log(tag);
      let selecthotwordlist = this.selecthotwordlist.filter(
        item => item != tag
      );
      // console.log(selecthotwordlist);
      let fliterhotwordlist = this.hotwordlist.filter(item => {
        return selecthotwordlist.join("").indexOf(item.label) == -1;
      });
      // console.log(fliterhotwordlist);
      this.selecthotwordlist = selecthotwordlist;
      this.fliterhotwordlist = fliterhotwordlist;
    },
    //抽屉搜索筛选热词
    fliterhotwoldsearch(value) {
      console.log(value);
      if (!value || value == "") {
        let fliterhotwordlist = this.hotwordlist.filter(item => {
          return this.selecthotwordlist.join("").indexOf(item.label) == -1;
        });
        this.fliterhotwordlist = fliterhotwordlist;
      }
      let fliterhotwordlist = this.fliterhotwordlist.filter(
        item => item.label.indexOf(value) > -1
      );
      this.fliterhotwordlist = fliterhotwordlist;
    },
    // 关闭选择热词抽屉
    handleClose(done) {
      done();
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    // 关闭选择热词抽屉
    Closedrawer() {
      this.drawer = false;
    },

    //发表文章
    async publish() {
      console.log(this.$refs.wangEditor.getEditorDataFn());
      if (this.selectcopywrite == [] || this.selectcopywrite.length <= 0) {
        this.$message({
          message: "请选择想要发表的文章",
          type: "warning"
        });
        return;
      }
      if (
        this.titleinfo == [] ||
        this.titleinfo.replace(/(^\s*)|(\s*$)/g, "") == ""
      ) {
        this.$message({
          message: "文章标题不能为空",
          type: "warning"
        });
        return;
      }
      if (this.selectcopywrite.status == "0") {
        this.$message({
          message: "文章已上架，不可修改",
          type: "warning"
        });
        return;
      }
      if (this.wordNum < this.minwordNum) {
        this.$message({
          message: "您写作的内容太少了 字数不能少于" + this.minwordNum + "字",
          type: "warning"
        });
        return;
      }
      if (this.wordNum > this.maxwordNum) {
        this.$message({
          message: "您写作的内容太多了 字数不能多于" + this.maxwordNum + "字",
          type: "warning"
        });
        return;
      }
      this.fullscreenLoading = true; //展示加载
      this.LoadingTime(); //三秒后隐藏加载--应对报错情况
      // console.log(this.typeid, this.groupId);
      // console.log(this.selectcopywrite);
      let res = await getselectMaterialEditApi({
        labelList: this.selecthotwordlist,
        content: this.$refs.wangEditor.getEditorDataFn(),
        esid: this.selectcopywrite.esid,
        id: this.selectcopywrite.id,
        status: "0",
        type: this.typeid,
        groupId: this.groupId,
        title: this.titleinfo
      });
      // setTimeout(() => {
      //   this.fullscreenLoading = false;
      // }, 2000);
      this.fullscreenLoading = false;

      if (res.code != 200) return;
      this.$message({
        type: "success",
        message: res.msg
      });
      this.edittitlenameflag = false;
      this.selectcopywrite = [];
      this.selecthotwordlist = [];
      this.fliterhotwordlist = this.hotwordlist;
      this.cleardrawer();
      this.getcopywritelist();
    },
    //删除文章
    async copywriteRemove() {
      if (this.selectcopywrite == [] || this.selectcopywrite.length <= 0) {
        this.$message({
          message: "请选择想要删除的文章",
          type: "warning"
        });
        return;
      }
      let res = await getselectMaterialRemoveApi(this.selectcopywrite.id);
      if (res.code != 200) return;
      this.$message({
        type: "success",
        message: res.msg
      });
      this.selectcopywrite = [];
      this.getcopywritelist();
      this.cleardrawer();
    },
    // 清空富文本内容
    cleardrawer() {
      this.currentContent = [];
    },
    //官网设置参数
    async getlistOfficial() {
      let res = await getlistOfficialApi();
      this.Officiallist = res.data;
      // console.log(this.Officiallist);
      res.data.forEach(item => {
        if (item.name == "字数上限") {
          this.maxwordNum = item.value;
        }
        if (item.name == "字数下限") {
          this.minwordNum = item.value;
        }
        if (item.name == "去重率") {
          this.repetitiverate = item.value;
        }
      });
    },
    //实时获取富文本文字数
    onEditorChange(e) {
      // console.log(e, "e");
      var reg = /<[^<>]+>/g; //去标签
      // var reg = /<(?!img).*?>/g //去除img以外的所有标签
      var value = e.replace(reg, "");
      value = value.replace(/&nbsp;/gi, ""); //将空格全部替换
      this.wordNum = value.length; //文字长度显示
      // console.log(this.wordNum, "  this.TiLength");
      // if (this.wordNum <= 10) {
      //   this.editorHtml = e;
      //   console.log(this.editorHtml, "this.editorHtml");
      // }
      // if (this.TiLength > 10) {
      //   //当长度大于10时,只截取10之前的内容并赋值
      //   this.$nextTick(() => {
      //     this.form.content = this.editorHtml;
      //   });
      //   this.warnShow = true;
      //   // this.$message.error("文字最多输入10字!");
      //   return false;
      // }
    },
    LoadingTime() {
      let count = 3; //赋值3秒
      var Loadingtimes = setInterval(() => {
        count--; //递减
        if (count <= 0) {
          this.fullscreenLoading = false;
          clearInterval(Loadingtimes);
        }
      }, 1000);
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getcopywritelist();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getcopywritelist();
    }
  }
};
</script>

<style scoped lang="scss">
.entity-org {
  height: 100%;
}
::v-deep .entity-main .el-card {
  position: relative;
}
::v-deep .entity-main .el-card__body {
  height: 100%;
}
::v-deep .entity-main .el-card__body > div {
  height: 92%;
  overflow-y: auto;

  // padding-top: 0 !important;
}
::v-deep .rightbox .el-card__body > div {
  padding-top: 40px !important;
  margin-top: -30px;
  overflow: hidden;
}

::v-deep .entity-main .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
//分页
.pagination {
  margin-top: 10px;
  text-align: center;
  margin-bottom: 70px;
}

/* 表格样式 */
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
  cursor: pointer;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table::before {
  display: none;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}
/* 内容区 */
.entity-main {
  height: 100%;
}
.entity-main .el-row {
  height: 100%;
}
//字数和查重tip
.writetip {
  font-size: 12px;
  font-weight: 400;
  color: #606e84;
  position: absolute;
  z-index: 99;
  top: 135px;
  width: calc(100% - 60px);
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px 20px;
  text-align: right;
  border-bottom: 1px solid #efefef;
}
// ::v-deep .el-select-dropdown {
//   right: 60px !important;
//   left: auto !important;
// }
// ::v-deep .el-select-dropdown__wrap {
//   right: 60px !important;
// }
.subBtn {
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
  z-index: 2000;

  .left {
    color: #606e84;
    font-size: 14px;
    span {
      display: inline-block;
      background: #f0f0f0;
      border-radius: 11px;
      border: 1px solid #dedede;
      padding: 4px 12px;
      font-weight: 400;
      color: #666666;
      font-size: 12px;
      margin-right: 4px;
      margin-bottom: 6px;
      min-width: 25px;
    }
    img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
    }
  }
  span {
    color: #f87a23;
  }
}
.bottomBtn {
  display: flex;
  align-items: center;
  .el-button--default {
    width: 120px;
    height: 40px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #dadee2;
    color: #606e84;
    font-size: 14px;
    margin-right: 8px;
  }
}
//select样式
.selsect-box {
  position: relative;
}
.selsect-box > p {
  position: relative;
  width: 120px;
  height: 40px;
  background: #f87a23;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  margin: 0;
}
.selsect-box .el-select {
  position: absolute;
  top: 0;
  z-index: 9;
  opacity: 0;
}
::v-deep .noPadding {
  // border-bottom: 1px solid #efefef;
  padding: 6px 0;
}
//富文本
::v-deep .w-e-toolbar {
  z-index: 99 !important;
  border-bottom: none !important;
}
::v-deep #wangEditor-1 {
  height: 100%;
}
::v-deep .el-card__body > div #div1 {
  height: 100%;
}
::v-deep .el-card__body > div #div1 .w-e-text-container {
  height: 70% !important;
  z-index: 9 !important;
  padding-top: 26px;
}

::v-deep .w-e-text {
  padding-bottom: 100px;
}
// ::v-deep .w-e-toolbar .w-e-menu,
// ::v-deep .w-e-toolbar .w-e-droplist {
//   z-index: 10002 !important;
// }
::v-deep .w-e-text-container .placeholder {
  padding-top: 26px;
}
// ::v-deep .w-e-toolbar .w-e-droplist .w-e-dp-title {
//   z-index: 10002;
// }
//富文本end
::v-deep .noPadding .right .el-input {
  width: 170px;
  // height: 32px;
  background: #ffffff;
  border-radius: 4px;
  // border: 1px solid #dcdfe6;
  margin-right: 8px;
}
::v-deep .el-input.is-focus .el-input__inner {
  border-color: #f97f2a;
}
::v-deep .el-input__inner {
  // 设置光标颜色
  caret-color: #f97f2a;
}
::v-deep .el-input__inner:focus {
  // el-input输入时设置边框颜色
  border: #f97f2a 1px solid;
}
::v-deep .el-select-dropdown__item.selected {
  color: #f87a23;
}
::v-deep .noPadding .right .el-button--medium {
  font-size: 14px;
  width: 80px;
  height: 36px;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #f87a23;
  color: #f87a23;
}
::v-deep .el-popper {
  // left: 0 !important;
  right: 36px !important;
  z-index: 2062 !important;
}
/* 抽屉样式 */
::v-deep .el-drawer__header {
  border-bottom: 1px solid #efefef;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
::v-deep .el-drawer__header > span {
  font-size: 18px;
  font-weight: bold;
  color: #2e3f5e;
  padding-left: 20px;
  background: url("~@/wss/assets/image/icon/cardLeft.png") left center no-repeat;
  background-size: 7px;
}
// 抽屉样式
::v-deep .el-drawer__body {
  padding: 0 16px;
  .el-button--medium {
    background: #f97f2a;
    border-color: #f97f2a;
    color: #fff;
    width: calc(30% - 32px);
    position: fixed;
    bottom: 8px;
    right: 16px;
  }
  .hotwordtitle {
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 0;
  }
  .el-tag {
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    margin: 6px;
  }
  .el-input--medium {
    margin: 8px auto;
  }
  .selecthotwordlist {
    .el-tag {
      background: #fae7da;
      color: #f97f2a;
      border-color: #f97f2a;
    }
    .el-tag--medium .el-icon-close {
      color: #f97f2a;
    }
    .el-tag--medium .el-icon-close:hover {
      background: #f97f2a;
      color: #ffffff;
    }
    .el-tag .el-icon-close::before {
      background: transparent;
    }
  }
  .fliterhotwordlist {
    padding-bottom: 60px;
    .el-tag {
      background-color: #fff;
      color: #666666;
      border: 1px solid #dedede;
    }
  }
}
::v-deep .rightbox .top .right {
  justify-content: flex-start;
  font-size: 16px;
  font-weight: bold;
  color: #2e3f5e;
  .el-input {
    width: 100%;
  }
  .el-input__inner {
    font-size: 16px;
    font-weight: bold;
  }
  img {
    margin-left: 8px;
  }
  p {
    margin: 0;
    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;

    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
    overflow: hidden;
  }
}
</style>
<style>
.publishSelect {
  right: 40px;
  left: auto !important;
}
</style>